<template>
  <div class="app-container">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      style="padding: 0;"
      :visible="dialogVisible"
      :before-close="cancelEidt"
      class="dialogStyleSmall"
      append-to-body
    >
      <div style="text-align:left">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          style="margin: 0;padding: 0;"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单状态" prop="status">
                <el-radio-group v-model="form.status" size="medium">
                  <el-radio label="0">启用</el-radio>
                  <el-radio label="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="到期时间" prop="status">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  clearable
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="submitFrom()">确 定</el-button>
        <el-button size="mini" @click="cancelEidt">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 弹框标题
      dialogTitle: '',
      dialogVisible: false,
      // form表单对象
      form: {
        menuId: '',
        // 是否启用时间
        status: '',
        // 菜单结束时间
        endTime: ''
      },
      rules: {}
    }
  },
  methods: {
    showView(data) {
      this.dialogVisible = true
      this.dialogTitle = '修改菜单时间'
      this.form.menuId = data.menuId
      this.form.status = data.status
      this.form.endTime = data.endTime
    },
    // 清空from表单
    emptyForm() {
      this.form = {
        status: '',
        // 菜单结束时间
        endTime: ''
      }
      this.resetFrom('form')
    },
    // 取消按钮
    cancelEidt() {
      this.dialogVisible = false
      this.emptyForm()
    },
    // 确认按钮
    submitFrom() {
      const from = this.form
      // 子组件的信息传输到父组件
      this.$emit('menuData', from)
      this.dialogVisible = false
    }
  }
}
</script>
